<template>
  <section class="cardUtil">
    <div class="wrapper">
      <div class="set-wrap"><div class="setting" @click="toManage"><i></i> 账号管理</div></div>
      <div class="content">
        <div class="face" :style="{background: `url(${userInfo.avatar}) no-repeat center`}"></div>
        <div class="info">
          <div class="name">{{userInfo.userId}}<i></i></div>
          <div class="userid">用户余额: {{accountNum}}</div>
          <div class="userid">用户账号: {{userInfo.nickName}}</div>
          <div class="userid">用户权限: {{userInfo.showStartLivingBtn?'VIP':'普通用户'}}</div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  props: {
    userInfo: {
      type: Object
    },
    accountNum: {
      type: Object,
      default: 0
    }
  },
  data () {
    return {
      
    }
  },
  methods: {
    toManage(){
      this.$router.push("/manage");
    }
  }
}
</script>
<style lang="less" scoped>
.cardUtil {
  background: white;
  padding: .1rem;
  margin-bottom: .18rem;
  .wrapper {
    width: 3.55rem;
    height: 1.2rem;
    border-radius: .06rem;
    padding: .1rem;
    box-sizing: border-box;
    background: linear-gradient(90deg,#eb3c3c,#ff7459);
    box-shadow: 0 2px 4px rgba(228,57,60,.4);
    .set-wrap {
      height: .2rem;
      display: flex;
      justify-content: flex-end;
      .setting {
        color: rgba(76,0,0,.7);
        font-size: 12px;
        display: flex;
        align-items: center;
        i {
          width: .12rem;
          height: .12rem;
          background: url("../../../assets/images/set-icon-1.png") no-repeat center;
          background-size: contain;
          margin-right: .02rem
        }
      }
    }
    .content {
      display: flex;
      .face {
        width: .6rem;
        height: .6rem;
        background-size: cover!important;
        border-radius: 50%;
        margin: 0 .05rem;
      }
      .info {
        .name {
          height: .14rem;
          display: flex;
          align-items: center;
          font-size: .14rem;
          color: #fff;
          margin-bottom: .08rem;
          i {
            width: .12rem;
            height: .12rem;
            background: url("../../../assets/images/edit-icon-1.png") no-repeat center;
            background-size: contain;
            margin-left: .04rem;
          }
        }
        .userid {
          font-size: 12px;
          color: hsla(0,0%,100%,.7);
          margin-bottom: .08rem;
        }
      }
    }
  }
}
</style>

